<template>
  <div class="shop">
   
    <!-- <div class="add_resaudit">
      <el-button size='small' type='primary' @click="addResidenceAudit">新增入驻商户</el-button>
    </div> -->
    <!-- <div class="search_btn">
      <el-input class="input"
        v-model="form.keywords"
        placeholder="输入分类名称或ID搜索"
        clearable></el-input>
      <el-button type="primary"
        @click="searchShopGroup">搜索</el-button>
    </div> -->
    <el-form :inline="true"
      size="mini"
      :model="form"
      class="form">
      <el-form-item label="所属区域:">
        <el-select style="width:130px;"
          v-model="province"
          filterable
          placeholder="省份"
          @change="onChangeProvince">
          <el-option v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;"
          v-model="city"
          filterable
          placeholder="市"
          @change="onChangeCity">
          <el-option v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;"
          v-model="area"
          filterable
          placeholder="区">
          <el-option v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.areaCode"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="缴费类型:">
         <el-select  style="width:140px;"
          v-model="form.vip_shop_pay_type"
          filterable
          placeholder="请选择缴费类型">
           <el-option label="全部" value="0"></el-option>
           <el-option label="未缴费" value="1"></el-option>
           <el-option label="全额缴费" value="2"></el-option>
           <el-option label="押金缴费" value="3"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="审核状态:">
         <el-select  style="width:140px;"
          v-model="form.audit_status"
          filterable
          placeholder="请选择审核状态">
           <el-option label="全部" value="0"></el-option>
           <el-option label="待审核" value="1"></el-option>
           <el-option label="已审核" value="2"></el-option>
           <el-option label="已驳回" value="3"></el-option>
          </el-select>
      </el-form-item>


      <el-form-item label='提交时间:'>
        <el-date-picker v-model="form.commit_time_start"
          type="date"
          style="width:136px"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker> ~ <el-date-picker v-model="form.commit_time_end"
          type="date"
          style="width:136px"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
          <el-input class="input"
        v-model="form.shop_name"
        placeholder="输入小店名称搜索"
        clearable></el-input>
        <el-input class="input"
        v-model="form.keywords"
        placeholder="输入手机号搜索"
        clearable></el-input>
      <el-button type="primary"
        @click="searchShopGroup">搜索</el-button>
      </el-form-item>
    </el-form>
   

  <el-table
      class="table"
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
    <el-table-column prop='id' label='ID'></el-table-column>
    <el-table-column prop='shop_name' label='小店名称'></el-table-column>
    <el-table-column prop='user_name' label='用户名'></el-table-column>
    <el-table-column  label='所属区域'>
      <template slot-scope="scope">
        {{scope.row.province}}.{{scope.row.city}}.{{scope.row.area}}
      </template>
    </el-table-column>
    <el-table-column label="邀请者账号" >
      <template slot-scope="scope">
        <p v-if="scope.row.invitation_user">{{scope.row.invitation_user.username}}</p>
        <p v-else>--</p>
      </template>
    </el-table-column>
    <el-table-column prop='type_word' label='商家分类'></el-table-column>
    <el-table-column  label='缴费类型'>
      <template slot-scope="scope">
        <!-- <p v-if="scope.row.vip_shop_pay_type ==0">无</p> -->
        <p v-if="scope.row.vip_shop_pay_type ==0">未缴费</p>
        <p v-if="scope.row.vip_shop_pay_type ==1">全额缴费</p>
        <p v-if="scope.row.vip_shop_pay_type ==2">押金缴费</p>
      </template>
    </el-table-column>
    <el-table-column prop='create_time' label='提交时间'></el-table-column>
    <el-table-column  label='审核状态'>
      <template slot-scope="scope">
        <p>{{scope.row. audit_status_word}}</p>
        <!-- <p v-if='scope.row.status == 2'>已入驻</p>
        <p v-if='scope.row.status == 3'>已暂停</p> -->
      </template>
    </el-table-column>
    <el-table-column fixed='right' label='操作'>
      <template slot-scope="scope">
        <el-button size='mini' v-if='scope.row.audit_status == 1' @click="openResidenceDetail(scope.row.id,false,true)">审核</el-button>
        <el-button size='mini' v-else @click="openResidenceDetail(scope.row.id,true,false)">查看</el-button>
      </template>
    </el-table-column>
    </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import {
  provinceCityArea,
} from "@/api/goods";
import {shopEnterAuditData} from "@/api/shopdetail"
export default {

  data () {
    return {
      province: "",
      provinceList: [],

      city: "",
      cityList: [],

      area: "",
      areaList: [],
      form: {
        commit_time_start: '',
        commit_time_end: '',
        id:'',
        shop_name:'',
        page:1,
        city_area:'',
        ad_code:'',
        vip_shop_pay_type:'0',
        audit_status:'0',
        keywords:''
      },
      tableData: [],
      total:0
    }
  },
  created () {
    this.getProvinceDataList("1", "0");
  },
  mounted () {
    this.getshopEnterAuditData()
  },
  methods: {
    onChangeProvince (e) {
      this.province = e;
      //后面加获取对应省的城市接口
      this.city = "";
      this.area = "";
      this.getProvinceDataList("2", e);
    },
    onChangeCity (e) {
      this.city = e;
      this.area = "";
      //获取对应城市的区
      this.getProvinceDataList("3", e);
    },
   
    searchShopGroup(){
      this.form.page = 1
      this.getshopEnterAuditData()
    },
    async getshopEnterAuditData(){
      if (
        (this.province && !this.city) ||
        (this.province && !this.area && !this.city)
      ) {
        this.$message.error("市或区不能为空");
        return;
      }
      if (this.area) {
        this.form.city_area = 3;
        this.form.ad_code = this.area;
      } else if (this.city) {
        this.form.city_area = 2;
        this.form.ad_code = this.city;
      } else {
        this.form.city_area = 0;
        this.form.ad_code = "";
      }
      if(!this.form.commit_time_start){
        this.form.commit_time_start = ''
      }
      if(!this.form.commit_time_end){
        this.form.commit_time_end = ''
      }
      var url = "page="+this.form.page+
                "&city_area="+this.form.city_area+
                "&ad_code="+this.form.ad_code+
                "&commit_time_start="+this.form.commit_time_start+
                "&commit_time_end="+this.form.commit_time_end+
                "&id="+this.form.id+
                "&shop_name="+this.form.shop_name+
                '&vip_shop_pay_type='+this.form.vip_shop_pay_type+
                '&audit_status='+this.form.audit_status+
                '&keywords='+this.form.keywords
      let res = await shopEnterAuditData(url)
      this.tableData =res.data.data
      this.total = res.data.total

    },
    //获取省列表
    async getProvinceDataList (t, p) {
      let res = await provinceCityArea({ type: t, pid: p });

      if (res.code === 10000) {
        if (t === "1") {
          this.provinceList = res.data;
        } else if (t === "2") {
          this.cityList = res.data;
        } else {
          this.areaList = res.data;
        }
      }
    },
    pageChange(page){
      this.form.page = page
      this.getshopEnterAuditData()
    },
    openResidenceDetail(id,isWatchOrEdit,audit){
        this.$router.push({
        path: "./residenceinformation",
        query: { cid: id ,type:1,isWatchOrEdit:isWatchOrEdit,audit:audit}
      });
    },
     addResidenceAudit(){
      this.$router.push({
        path: "./residenceinformation",
        query: { type:2}
      });
    },
        tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  
.add_resaudit{
   float: right;
   margin-bottom: 10px;
}
// .form {
//   margin-top:42px;
// }
.input{
  width:168px;
  margin-right: 12px;
}
.pagination{
  float: right;
  margin-top: 15px;
}

}
</style>